<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		
		<title>编辑微单页</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
		<!--ios是否运行创建快捷启动方式-->
		<meta content="yes" name="apple-mobile-web-app-capable">
		<!--ios顶部通知栏的样式 黑色-->
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<!--遇到数字不让转成电话号码格式-->
		<meta content="telephone=no" name="format-detection">
		<meta name="referrer" content="never">
		<script src="js/remstyle.js"></script>
		<link rel="stylesheet" href="assets/mui/css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="common/css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/min_page.css" />
		<link rel="stylesheet" type="text/css" href="css/sameInfo.css" />
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="application/javascript " src="js/jquery-1.7.2.min.js "></script>
		<script src="layer/layer.js"></script>
		<link rel="stylesheet" type="text/css" href="css/open_btn.css" />
		<link rel="stylesheet" href="css/cropper.min.css">
		<link rel="stylesheet" href="css/ImgCropping.css">
		<link rel="stylesheet" type="text/css" href="css/material_phone.css" />
		<link rel="stylesheet" type="text/css" href="css/material_QR_code.css" />
		<link rel="stylesheet" type="text/css" href="css/material_link.css" />
		<link rel="stylesheet" type="text/css" href="layer/skin/layer.css" />
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" href="css/swiper.min.css">
		<script src="js/config.js"></script>
	</head>
	<style>
		.page_edit_top {
			width: 100%;
			height: 3.2rem;
			background: #5c9fcc;
			display: flex;
			flex-direction: row;
			align-items: center;
			position: relative;
		}
		
		.page_edit_left {
			width: 0.84rem;
			height: 0.84rem;
			background: #497ea3;
			border-radius: 50%;
			margin-left: 0.34rem;
			margin-right: 0.28rem;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.page_edit_left span {
			color: #fff;
			font-size: 0.40rem;
			display: inline-block;
		}
		
		.page_edit_con {
			width: 67%;
			display: flex;
			flex-direction: column;
			/*			border: 1px solid red;*/
		}
		
		.page_edit_right {
			width: auto;
			height: 0.5rem;
			position: absolute;
			top: 0.2rem;
			right: 0.24rem;
		}
		
		input {
			background: none;
		}
		
		.title_input {
			font-size: 0.44rem;
			margin-bottom: 0.27rem;
		}
		
		.title_input::-moz-placeholder {
			color: #fff;
		}
		
		.title_input::-webkit-input-placeholder {
			color: #fff;
		}
		
		.title_input:-ms-input-placeholder {
			color: #fff;
		}
		
		.title_hint {
			font-size: 0.32rem;
		}
		
		.title_hint::-moz-placeholder {
			color: #aecfe6;
		}
		
		.title_hint::-webkit-input-placeholder {
			color: #aecfe6;
		}
		
		.title_hint:-ms-input-placeholder {
			color: #aecfe6;
		}
		
		.page_bannar {
			/*	border: 1px solid red;*/
			position: relative;
			/*display: none;*/
		}
		
		.banner_img {
			width: 100%;
			height: auto;
		}
		
		.page_edit {
			height: 6rem;
			display: none;
			/*border: 1px solid red;*/
			text-align: center;
			padding-top: 2rem;
			box-sizing: border-box;
		}
		
		.page_edit img {
			width: 1.7rem;
			height: auto;
			margin: 0 auto;
		}
		
		.page_bottom {
			width: 100%;
			height: 1rem;
			position: fixed;
			bottom: 0;
			left: 0;
			background: #fff;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
		}
		
		.page_bottom button {
			width: 40%;
			height: 0.74rem;
			text-align: center;
			line-height: 0.74rem;
			border: none;
		}
		
		.save_draft {
			border: 1px solid #1f8ff3 !important;
			color: #1f8ff3;
		}
		
		.release {
			background: #1f8ff3;
			color: #fff;
		}
		
		#con_type {
			display: none;
			position: fixed;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			width: 100%;
			height: 100%;
			background-color: black;
			z-index: 1001;
			-moz-opacity: 0.6;
			opacity: .60;
			filter: alpha(opacity=60);
		}
		
		#con_type_info {
			width: 100%;
			position: fixed;
			margin: auto;
			top: 25%;
			left: 0;
			right: 0;
			z-index: 1002;
			display: none;
			/*border: 1px solid red;*/
		}
		
		.con_type_list {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 0 0.4rem;
			box-sizing: border-box;
			margin-bottom: 0.5rem;
		}
		
		.page_type_info {
			width: 45%;
			height: 1.2rem;
			border-radius: 6px;
			margin-bottom: 0.36rem;
			overflow: hidden;
		}
		
		.one_choose {
			width: 100%;
			height: 1.2rem;
			display: flex;
			background: #fff;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
		}
		
		.one_choose>input[type="checkbox"] {
			-webkit-appearance: none;
			/*清除复选框默认样式*/
			height: 20px;
			/*高度*/
			vertical-align: middle;
			width: 20px;
			border: 1px solid #a7a7a7;
			border-radius: 50%;
			margin-right: 0.1rem;
		}
		
		.one_choose>input[type="checkbox"]:checked {
			/*复选框的背景图，就是上图*/
			border: none;
			background: #1f8ff3 url(img_page/duigou.png) no-repeat center center;
			background-size: 60%;
		}
		/*.one_choose_a {
			width: 100%;
			height: 1.2rem;
			background: #1f8ff3;
			color: #fff;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
		}*/
		
		.page_type_info_img {
			height: 0.4rem;
			width: auto;
		}
		
		.page_type_info span {
			font-size: 0.30rem;
		}
		
		.insert_content {
			width: 92%;
			height: 0.8rem;
			background: #1f8ff3;
			border: none;
			color: #fff;
		}
		
		.my_choose {
			width: 100%;
			/*border: 1px solid red;*/
			display: flex;
			align-items: center;
			flex-direction: column;
			/*margin-bottom: 0.38rem;*/
		}
		
		.my_choose_con {
			width: 90%;
			height: 1.9rem;
			margin: 0.2rem 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;
		}
		
		.my_choose_img {
			width: 0.5rem;
			height: auto;
			margin-bottom: 0.16rem;
		}
		
		.my_choose_text {
			color: #707070;
			font-size: 0.26rem;
		}
		
		.choose_edit {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 1.1rem;
			height: 1.1rem;
			background: black;
			opacity: 0.4;
			border-radius: 50%;
			justify-content: center;
			color: #fff;
			z-index: 20;
			font-size: 0.22rem;
			display: none;
			padding-top: 0.2rem;
			box-sizing: border-box;
			cursor: pointer;
		}
		
		.choose_edit_img {
			width: 0.5rem;
			height: auto;
			/*margin-bottom: 0.09rem;*/
			margin: 0 auto;
		}
		
		.choose_edit span {
			text-align: center;
			display: inline-block;
			width: 100%;
		}
		
		.choose_del {
			width: 0.4rem;
			height: 0.4rem;
			position: absolute;
			top: 0;
			right: 0;
			display: none;
			text-align: center;
			padding-top: 0.08rem;
			box-sizing: border-box;
			display: none;
		}
		
		.choose_del img {
			width: 60%;
			height: auto;
			margin: 0 auto;
			display: none;
		}
		
		.choose_add {
			display: none;
			width: 0.8rem;
			height: auto;
		}
		
		.choose_photo {
			width: 100%;
			height: 5rem;
			background: #fff;
			position: fixed;
			z-index: 100;
			bottom: 0;
			left: 0;
			text-align: center;
			display: none;
		}
		
		.choose_photo_type {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			flex-direction: row;
		}
		
		.choose_photo_type div:first-child {
			position: relative;
		}
		
		.choose_photo_type div:first-child input:last-child {
			display: inline-block;
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}
		
		.photo_type_info {
			width: 40%;
			height: auto;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		
		.photo_type_info img {
			width: 1.03rem;
			height: auto;
			margin-bottom: 0.3rem;
		}
		
		.upload_photo {
			width: 1.03rem;
			height: 1.03rem;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			margin: auto;
			width: 48%;
			height: 100%;
			opacity: 0;
			cursor: pointer;
		}
		
		.photo_line {
			width: 80%;
			height: 1rem;
			border-bottom: 1px solid #777;
			text-align: center;
			font-size: 0.32rem;
		}
		
		.save_photo {
			width: 90%;
			height: 0.8rem;
			border: none;
			background: #1f8ff3;
			line-height: 0.8rem;
			text-align: center;
			color: #fff;
			margin-top: 0.4rem;
		}
		
		.tailoring-container .tailoring-content {
			width: 70% !important;
		}
		
		.l-btn {
			background: none !important;
		}
		
		.l-btn img {
			width: 0.5rem !important;
		}
		
		.my_choose_list {
			margin-bottom: 2rem;
		}
		
		.my_page_content {
			width: 90%;
			/*height:2.4rem;*/
			/*border: 1px dashed #5c9fcc;*/
			margin: 0.2rem 0;
			font-size: 0.28rem !important;
			/*overflow: hidden;*/
		}
		
		img {
			max-width: 100%;
		}
		
		.left_return {
			width: auto;
			height: 0.5rem;
			position: absolute;
			top: 1rem;
			left: 0.3rem;
		}
		
		.phone_list {
			width: 100% !important;
			height: ;
		}
		
		.new_shop_con {
			width: 100%;
			height: auto;
			/*border: 1px solid red;*/
			display: flex;
			/*align-items:center ;*/
			flex-direction: column;
			margin: 0 auto;
		}
		
		.shop_info_name {
			/*margin-bottom: 0.7rem;*/
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			margin: 0.1rem 0;
		}
		
		.shop_info_price {
			color: red;
			margin-bottom: 0.2rem;
		}
		
		.new_shop_img {
			width: 100%;
			height: auto;
			margin: 0 auto;
			/*max-height: 3rem;*/
		}
		
		.buy_now {
			width: 80%;
			height: 0.8rem;
			background: #CF2D28;
			text-align: center;
			line-height: 0.8rem;
			border-radius: 3px;
			color: #fff;
			font-size: 0.3rem;
			margin: 0 auto;
		}
		
		.choose_files {
			position: fixed;
			width: 100%;
			height: auto;
			z-index: 100;
			/*border: 1px solid red;*/
			bottom: 0;
			left: 0;
			background: #fff;
			display: none;
		}
		
		.files_list {}
		
		.choose_files_title {
			width: 100%;
			height: 1rem;
			line-height: 1rem;
			padding-left: 0.3rem;
			box-sizing: border-box;
		}
		
		.files_img {
			flex-shrink: 0;
			width: 1.2rem;
			height: 1.2rem;
			margin-top: 0 !important;
		}
		
		.files_info {
			height: 2.4rem;
			margin: 0;
			text-align: center;
			font-size: 18px;
			display: -webkit-box;
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
			flex-direction: column;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			-webkit-box-align: center;
			-ms-flex-align: center;
			-webkit-align-items: center;
			align-items: center;
		}
		
		.swiper-pagination {
			bottom: 0 !important;
		}
		
		.choose_files_bottom {
			width: 100%;
			height: 1rem;
			display: flex;
			align-items: center;
			justify-content: space-around;
			flex-direction: row;
			margin-top: 0.5rem;
			margin-bottom: 0.4rem;
		}
		
		.choose_files_bottom button {
			width: 40%;
			height: 0.8rem;
			line-height: 0.8rem;
			text-align: center;
		}
		
		.choose_files_bottom button:first-child {
			border: 1px solid #258edf;
			color: #258edf;
		}
		
		.choose_files_bottom button:last-child {
			background: #258edf;
			color: #fff;
			border: none;
		}
		
		.photo_hover {
			display: none;
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: 100;
			background: black;
			opacity: 0.5;
		}
		
		.file_choose input[type="radio"] {
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			margin: auto;
			z-index: 500;
			-webkit-appearance: none;
			/*清除复选框默认样式*/
			height: 22px;
			/*高度*/
			vertical-align: middle;
			width: 22px;
			border: 1px solid #a7a7a7;
			border-radius: 50%;
			/*	margin-right: 0.1rem;*/
		}
		
		.file_choose input[type="radio"]:checked {
			/*background-position: -48px 0;*/
			/*复选框的背景图，就是上图*/
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			margin: auto;
			z-index: 500;
			border: none;
			background: #e44e50 url(img_page/duigou.png) no-repeat center center;
			background-size: 60%;
			opacity: 1 !important;
		}
		
		[v-cloak] {
			display: none;
		}
		
		.choose_top {
			width: 100%;
			height: auto;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 0.2rem 0.3rem;
		}
		
		.choose_top_label {
			/*border: 1px solid red;*/
			position: relative;
			padding: 0;
			height: 28px;
		}
		
		.pl_text {
			position: absolute;
			top: 0;
			left: 4px;
			line-height: 26px;
			color: #fff;
		}
	</style>

	<body>
		<!--顶部-->
		<div class="top">
			<div class="top-one" onclick="javascript :history.back(-1);">
				<span><img src="img_page/right.png"/></span>
			</div>
			<div class="point">
				<img src="img_page/3point.png" />
			</div>
		</div>
		<div class="my_choose_list">
			<!--标题内容-->
			<div class="page_edit_top">
				<div class="page_edit_left">
					<span class="fa fa-folder-o"></span>

				</div>
				<div class="page_edit_con">
					<input class="title_input" id="title_input" :value="choose_list.title" placeholder="这里是标题" onblur="title_save()" />
					<input class="title_hint" id="title_hint" :value="choose_list.sharing_language" placeholder="请填写分享展示语" onblur="title_save()" />
				</div>
				<img v-if="choose_list.img_url==null" src="img_page/min_page_photo.png" class="page_edit_right" @click="choose_banner()">
			</div>
			<!--上传bannar图-->
			<div class="page_bannar" v-if="choose_list.img_url!=null" onclick="banner_edit()">
				<img class="banner_img" :src="choose_list.img_url" />
				<div class="choose_edit" @click="choose_banner()">
					<img class="choose_edit_img" src="img_page/choose_edit.png" />
					<span>编辑</span>
				</div>
			</div>
			<!--添加编辑内容-->
			<div class="page_edit" id="page_edit">
				<img src="img_page/page_add.png" onclick="add_page_con(0)" />
				<span>请添加编辑内容</span>
			</div>
			<!--插入内容后-->

			<div class="my_choose" v-cloak v-for="(v,index) in choose_list.contentList" @click="choose_edit($event)">

				<img class="choose_add" src="img_page/page_add.png" @click="add_type(v.sort,0)" />

				<div class="my_choose_con" v-if="v.content==null">
					<img v-if="v.type==0" class="my_choose_img" src="img_page/page_text.png" />
					<img v-if="v.type==2" class="my_choose_img" src="img_page/page_goods.png" />
					<img v-if="v.type==1" class="my_choose_img" src="img_page/page_photo.png" />
					<img v-if="v.type==3" class="my_choose_img" src="img_page/page_phone.png" />
					<img v-if="v.type==4" class="my_choose_img" src="img_page/page_line.png" />
					<img v-if="v.type==5" class="my_choose_img" src="img_page/page_code.png" />
					<img v-if="v.type==6" class="my_choose_img" src="img_page/page_video.png" />
					<span v-if="v.type==0" class="my_choose_text">点击编辑文本</span>
					<span v-if="v.type==2" class="my_choose_text">点击编辑商品</span>
					<span v-if="v.type==1" class="my_choose_text">点击编辑图片</span>
					<span v-if="v.type==3" class="my_choose_text">点击编辑电话</span>
					<span v-if="v.type==4" class="my_choose_text">点击编辑链接</span>
					<span v-if="v.type==5" class="my_choose_text">点击编辑二维码</span>
					<span v-if="v.type==6" class="my_choose_text">点击编辑视频</span>
					<div class="choose_edit" @click="my_edit(v.type,v.id)">
						<img class="choose_edit_img" src="img_page/choose_edit.png" />
						<span>编辑</span>
					</div>
					<div class="choose_del"><img src="img_page/choose_del.png" @click="type_del(v.id)" /></div>

				</div>
				<div class="my_page_content" v-cloak v-if="v.content!=null" style="position: relative;">

					<div style="position: absolute; width: 100%;height: 100%;z-index: 1;filter: alpha(opacity=0);opacity: 0;background: #ffffff;"></div>
					<div v-html="v.content" style="word-break:break-all;">{{v.content}}</div>

					<div class="choose_edit" @click="my_edit(v.type,v.id)">
						<img class="choose_edit_img" src="img_page/choose_edit.png" />
						<span>编辑</span>
					</div>
					<div class="choose_del"><img src="img_page/choose_del.png" @click="type_del(v.id)" /></div>
				</div>
				<img class="choose_add" src="img_page/page_add.png" @click="add_type(v.sort,1)" />

			</div>
		</div>
		<!--底部按钮-->
		<div class="page_bottom">
			<!--<button class="save_draft" onclick="save_draft()">存草稿</button>-->
			<button class="release" onclick="save_page()">发布</button>
		</div>

		<!--弹出层-->
		<div id="con_type"><img class="left_return" src="img/return_left.png" onclick="close_type()" />

		</div>
		<div id="con_type_info" style="">
			<div class="con_type_list">
				<div class="page_type_info" v-cloak v-for="v in type_info" @click="choose_type">
					<label class="one_choose" style="">
					<img class="page_type_info_img" :src="v.type_img" />
					<span>{{v.type_text}}</span>
					<input class="page_type_choose" :value="v.type" type="checkbox" name="my_check" />
					</label>
				</div>
			</div>
			<div class="" style="text-align: center;">
				<button class="insert_content" onclick="insert_con()">插入内容</button>
			</div>
		</div>
		<!-------->
		<!--底部弹出层-->
		<div class="choose_photo" id="choose_photo" style="">
			<img src="img_page/del.png" style="width: 0.5rem;height: auto;float: right;margin-right: 0.3rem;margin-top: 0.1rem;" onclick="photo_del()" />
			<div class="choose_photo_type">
				<!--<div class="photo_type_info">
					<img src="img_page/expert_upload.png" />
					<span>上传</span>
					<input onchange="imgPreview(this)" style="border: 1px solid red;" type="file" accept="image/jpg,image/jpeg,image/png" name="chooseImg" id="chooseImg" class="upload_photo">
				</div>-->
				<div class="photo_type_info">
					<img src="img_page/my_photo.png" onclick="my_photos()" />
					<span>素材图库</span>
				</div>
			</div>
			<!--<input class="photo_line" placeholder="图片链接" id="img_line" />-->
			<button class="save_photo" onclick="photo_line_save()">保存</button>
		</div>
		<!--选择发布文件夹弹出层-->
		<div class="choose_files ">
			<span class="choose_files_title">加入文件夹</span>
			<div class="swiper-container" style="background:#f9f9f9 ;">
				<div class="files_list swiper-wrapper">
					<div class="files_info swiper-slide" v-cloak v-for='(v,index) in files' :data-id="v.type_id" @click="files_choose_del($event)">
						<div id="" style="position: relative;border-radius: 10px;overflow: hidden;">
							<img class="files_img" src="img_page/all_files.png" />
							<!--点击文件夹遮罩层-->
							<div class="photo_hover" :data-id="v.type_id">
								<label class="file_choose"><input type="radio" name="sex" value="male" /></label>
							</div>
						</div>
						<span>{{v.type_name}}</span>
					</div>

					<!-- Add Pagination -->

				</div>
				<div class="swiper-pagination"></div>
			</div>
			<div class="choose_top">
				<span>发布文章是否置顶</span>
				<label class="choose_top_label"><input class="mui-switch mui-switch-animbg"  type="checkbox" checked=""/>
			<span class="pl_text">开</span>
			</label>
			</div>
			<div class="choose_files_bottom">
				<button onclick="files_cancle()">取消</button>
				<button onclick="files_sure()">确认发布</button>
			</div>

		</div>
		<!--图片裁剪框 start-->
		<div class="imgShow"><img src="" alt="" /></div>

	</body>
	<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script src="js/cropper.min.js"></script>
	<script src="layer/layer.js"></script>

	<script src="js/swiper.min.js"></script>

	<script>
var newAddresss = window.location.href;	
		
		//弹出框水平垂直居中
		(window.onresize = function() {
				
			var win_height = $(window).height();
			var win_width = $(window).width();
			if(win_width <= 768) {
				$(".tailoring-content").css({
					"top": (win_height - $(".tailoring-content").outerHeight()) / 2,
					"left": 0
				});
			} else {
				$(".tailoring-content").css({
					"top": (win_height - $(".tailoring-content").outerHeight()) / 2,
					"left": (win_width - $(".tailoring-content").outerWidth()) / 2
				});
			}
		})();

		//打开分类
		function add_page_con(sort) {
			console.log(sort)
			//显示背景遮罩
			document.getElementById("con_type").style.display = "block";
			//显示消息弹出框
			document.getElementById("con_type_info").style.display = "block";

		}
		//关闭分类
		function close_type() {
			//显示背景遮罩
			document.getElementById("con_type").style.display = "none";
			//显示消息弹出框
			document.getElementById("con_type_info").style.display = "none";
		}

		function banner_edit() {
			$(".page_bannar .choose_edit").css({
				"display": "block"
			})
		}
		//光标离开保存标题
		function title_save() {
			var title = document.getElementById("title_input").value;
			var sharing_language = document.getElementById("title_hint").value;
			var id = v_param
			$.ajax({
				type: "get",
				url: v_url + "/wechat/singlepage/savePage",
				data: {
					id: v_param,
					title: title,
					sharing_language: sharing_language,
					c_user_id: c_user_id
				},
				async: true,
				success: function(res) {
					if(res.code == 200) {

					}
				}
			});
		}
		/*弹出层中文件夹列表*/
		var all_files = new Vue({
			el: '.files_list',
			data: {
				files: [],
			},
			created: function() {
				this.getList();

			},
			methods: {
				getList: function() {
					console.log("11111");
					var that = this;
					$.ajax({
						type: "get",
						url: v_url + "/wechat/singlepage/getMyFileList",
						data: {
							source: '1',
							c_user_id: c_user_id
						},
						async: true,
						success: function(res) {
							var list = res.data;
							that.files = list
							console.log(that.files);
							that.$nextTick(() => { // 下一个UI帧再初始化swiper
								that.initSwiper();
							});
						}
					});

				},
				initSwiper() {
					if(this.swiper != null) return;
				},
				files_choose_del: function(obj) {
					//console.log($(obj.currentTarget).find("input").val());
					var dom = $(obj.currentTarget).find("input");
					var hover = $(obj.currentTarget).find(".photo_hover");
					var id = $(obj.currentTarget).attr("data-id");
					$(".photo_hover").css({
						"display": "none"
					})
					//dom.prop("checked", !dom.prop("checked"));
					console.log(id);
					if(dom.prop("checked")) {
						hover.css("display", "none");
					} else {
						hover.css("display", "block");
					}
					dom.prop("checked", !dom.prop("checked"));
					this.id = id
				}

			}
		})

		var type_info = new Vue({
			el: '#con_type_info',
			data: {
				type_info: [{
						type_img: 'img_page/page_text.png',
						type_text: '文字',
						type: 0
					}, {
						type_img: 'img_page/page_goods.png',
						type_text: '商品',
						type: 2
					}, {
						type_img: 'img_page/page_photo.png',
						type_text: '图片',
						type: 1
					}, {
						type_img: 'img_page/page_video.png',
						type_text: '视频',
						type: 6
					}, {
						type_img: 'img_page/page_phone.png',
						type_text: '电话',
						type: 3
					}, {
						type_img: 'img_page/page_line.png',
						type_text: '链接',
						type: 4
					}
					//					{
					//						type_img: 'img_page/page_code.png',
					//						type_text: '二维码',
					//						type: 5
					//					},

				]
			},
			methods: {
				choose_type: function() {

				}
			}

		})

		function insert_con() {
			console.log(new_choose_list.choose_list.id);
			var lab_name = document.getElementsByName('my_check');
			var types = '';
			$(lab_name).each(function(i) {
				if(this.checked) {
					if(types) {
						types = types + "," + this.value
					} else {
						types = this.value
					}
				}

			});
			var id = new_choose_list.choose_list.id
			$.ajax({
				type: "get",
				url: v_url + "/wechat/singlepage/insertContent",
				data: {
					page_id: id,
					types: types,
					sort: new_choose_list.sort,
					qxp: new_choose_list.qxp,
					c_user_id: c_user_id
				},
				async: false,
				success: function(res) {
					console.log(res.code);
					if(res.code == 200) {

						layer.msg("插入成功", function() {
							//隐藏背景遮罩
							document.getElementById("con_type").style.display = "none";
							//隐藏消息弹出框
							document.getElementById("con_type_info").style.display = "none";
							window.location.href = "min_page_add.html?url=" + id + '&c_user_id=' + c_user_id
						})
					}
				}
			});
		}

		function photo_del() {
			document.getElementById("choose_photo").style.display = "none";
		}

		function my_photos() {
			var id = new_choose_list.img_id
			console.log(id)
			window.location.href = 'material_new_photo.html?url=' + id + '&c_user_id=' + c_user_id +"&addToTo="+window.location.href;
		}

		function photo_line_save() {
			var id = new_choose_list.img_id
			console.log(id)
			var img_url = document.getElementById("img_line").value;
			//			var img_url=document.getElementsByName('my_check');
			img_url = "<p><img src='" + img_url + "'/></p>"
			$.ajax({
				type: "get",
				url: v_url + "/wechat/singlepage/saveContent",
				data: {
					id: id,
					content: img_url,
					c_user_id: c_user_id
				},
				async: false,
				success: function(res) {
					if(res.code == 200) {
						console.log("保存成功")
						window.location.reload()
					} else {
						console.log("保存失败")
					}
				}
			});
		}
		var new_choose_list = new Vue({
			el: '.my_choose_list',
			data: {
				sort: 0,
				qxp: '0',
				choose_list: []
			},
			created: function() {
				this.getList();
			},
			methods: {
				getList: function() {
					console.log("11111");
					var that = this;
					$.ajax({
						type: "get",
						url: v_url + "/wechat/singlepage/getPageById",
						data: {
							id: v_param,
							c_user_id: c_user_id
							//id:'000'
						},
						async: false,
						success: function(res) {
							var list = res.data;
							that.choose_list = list
							if(!list.contentList || list.contentList.length == 0) {
								document.getElementById("page_edit").style.display = "block";
							}
							v_param = list.id;
							console.log(that.choose_list);
							window.urll = res.data.id

						}
					});

				},
				add_type: function(sort, qxp) {
					this.sort = sort;
					this.qxp = qxp;
					//显示背景遮罩
					document.getElementById("con_type").style.display = "block";
					//显示消息弹出框
					document.getElementById("con_type_info").style.display = "block";
				},
				choose_banner: function() {
					var id = v_param;
					console.log(id)
					window.location.href = 'material_new_photo.html?page_id=' + id + '&c_user_id=' + c_user_id +"&addToTo="+window.location.href;
				},
				choose_edit: function(obj) {
					obj = obj.currentTarget;
					var arrimg = $(".choose_add");
					$(arrimg).each(function(i) {
						$(this).css("display", "none");

					});
					var arrborder = $(".my_choose_con");
					$(arrborder).each(function(i) {
						$(this).css("border", "none");

					});
					var allborder = $(".my_page_content");
					$(allborder).each(function(i) {
						$(this).css("border", "none");

					});
					var arredit = $(".choose_edit");
					$(arredit).each(function(i) {
						$(this).css("display", "none");

					});

					var choose_del = $(".choose_del");
					$(choose_del).each(function(i) {
						$(this).css("display", "none");

					});
					var arr = $(obj).find(".choose_add");
					$(arr).each(function(i) {
						$(this).css("display", "block");

					});
					var arr = $(obj).find(".my_choose_con");
					$(arr).each(function(i) {
						$(this).css("border", "1px dashed #5c9fcc");

					});
					var allborder = $(".my_page_content");
					$(allborder).each(function(i) {
						$(this).css("border", "1px dashed #5c9fcc");

					});
					var arr = $(obj).find(".choose_del");
					$(arr).each(function(i) {
						$(this).css("display", "block");

					});

					var arrqq = $(obj).find(".choose_edit");
					$(arrqq).each(function(i) {
						$(this).css("display", "block");
					});
				},
				type_del: function(id) {
					console.log(id)
					layer.confirm("确认要删除吗？", {
							btn: ['确定', '取消']
						},
						function() {
							$.ajax({
								type: "get",
								url: v_url + "/wechat/singlepage/deleteContent",
								data: {
									id: id,
									c_user_id: c_user_id
								},
								async: true,
								success: function(res) {
									if(res.code == 200) {
										layer.msg("删除成功", function() {
											window.location.reload()
										})
									} else {
										layer.msg("删除失败")
									}
								}
							});
						})
				},
				my_edit: function(type, id) {
					this.img_id = id;
					console.log(id)
					if(type == 0) {
						window.location.href = 'page_text_edit.html?url=' + id + '&c_user_id=' + c_user_id +"&addToTo="+window.location.href;
					}
					if(type == 1) {

						document.getElementById("choose_photo").style.display = "block";
						//window.location.href = 'material_photo.html'
					}
					if(type == 2) {
						window.location.href = 'material_shop_list.html?url=' + id + '&c_user_id=' + c_user_id +"&addToTo="+window.location.href;
					}
					if(type == 3) {
						window.location.href = 'material_phone.html?url=' + id + '&c_user_id=' + c_user_id +"&addToTo="+window.location.href;
					}
					if(type == 4) {
						window.location.href = 'material_link.html?url=' + id + '&c_user_id=' + c_user_id +"&addToTo="+window.location.href;
					}
					if(type == 5) {
						window.location.href = 'material_QR_code_list.html?url=' + id + '&c_user_id=' + c_user_id +"&addToTo="+window.location.href;
					}
					if(type == 6) {
						window.location.href = 'material_video.html?url=' + id + '&c_user_id=' + c_user_id +"&addToTo="+window.location.href;
					}

				}

			}
		})
		/*发布*/
		function save_page() {
			$(".choose_files").css({
				"display": "block"
			})

			var swiper = new Swiper('.swiper-container', {
				slidesPerView: 3,
				spaceBetween: 30,
				slidesPerGroup: 3,
				loop: false,
				loopFillGroupWithBlank: true,

				pagination: {
					el: '.swiper-pagination',
					clickable: true,
				},
			});

		}
		/*存草稿*/
		function save_draft() {
			var title = document.getElementById("title_input").value;
			var sharing_language = document.getElementById("title_hint").value;
			var type_id = all_files.id
			var id = v_param
			console.log(type_id)
			$.ajax({
				type: "get",
				url: v_url + "/wechat/singlepage/savePage",
				data: {
					id: id,
					title: title,
					sharing_language: sharing_language,
					type_id: type_id,
					status: '0',
					c_user_id: c_user_id
				},
				async: true,
				success: function(res) {
					if(res.code == 200) {
						layer.msg("保存成功", function() {
							window.location.href = "min_page.html?c_user_id" + c_user_id
						})
					} else {
						layer.msg("保存失败")
					}
				}
			});

		}
		/*点击确认发布*/
		function files_sure() {
			//var files_choose_del=files_choose_del()
			var title = document.getElementById("title_input").value;
			var sharing_language = document.getElementById("title_hint").value;
			var type_id = all_files.id
			var id = v_param
			var roof_placement = ''
			var input_check = $(".choose_top_label input").prop("checked")
			console.log(input_check)
			if(input_check == true) {
				roof_placement = 1
			} else {
				roof_placement = 0
			}
			//console.log(type_id)
			if(!type_id) {
				layer.msg("请选择文章文件夹")
			} else {
				$.ajax({
					type: "get",
					url: v_url + "/wechat/singlepage/savePage",
					data: {
						id: v_param,
						title: title,
						sharing_language: sharing_language,
						type_id: type_id,
						status: '0',
						roof_placement: roof_placement,
						c_user_id: c_user_id
					},
					async: true,
					success: function(res) {
						if(res.code == 200) {
							layer.msg("保存成功", function() {

								window.location.href = "min_page_check.html?url=" + id + '&c_user_id=' + c_user_id
							})
						} else {
							layer.msg("保存失败")
						}
					}
				});
			}

		}

		function files_cancle() {
			$(".choose_files").css({
				"display": "none"
			})
		}
		//	图片上传
		function imgPreview(fileDom) {
			//判断是否支持FileReader
			if(window.FileReader) {
				var reader = new FileReader();
			} else {
				alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
			}
			//获取文件
			var file = fileDom.files[0];
			var imageType = /^image\//;
			//是否是图片
			if(!imageType.test(file.type)) {
				alert("请选择图片！");
				return;
			}
			//读取完成
			reader.onload = function(e) {
				//图片路径设置为读取的图片
				var urlTo = e.target.result;
				$('.imgShow img').attr({
					"src": urlTo
				});
			};
			reader.readAsDataURL(file);

			var formData = new FormData();
			formData.append('file', $('#chooseImg')[0].files[0]); //添加图片信息的参数
			formData.append('sizeid', 123); //添加其他参数
			$.ajax({
				url: v_url + "/wechat/singlepage/uploadImgFile?c_user_id=" + c_user_id + "&page_id=" + window.urll,
				type: 'POST',
				cache: false, //上传文件不需要缓存
				data: formData,
				processData: false, // 告诉jQuery不要去处理发送的数据
				contentType: false, // 告诉jQuery不要去设置Content-Type请求头
				success: function(data) {
					console.log(data, 8888);
					console.log(data.msg)
					$('.imgShow img').attr({
						"src": data.msg
					})
				}
			})

		}
	</script>

</html>